<template>
  <div class="zz">
    <swiper :options="swiperOption" :auto-update="true" :auto-destroy="true" ref="mySwiper">
      <swiper-slide>
        <div class="zong">
          <div class="back" @click="toRouter('/charity/charityMall')">
            <span>&lt;商城</span>
          </div>
          <!-- 外部背景开始 -->
          <div class="outer">
            <!-- <el-image :src="payload[i]" class="img"></el-image> -->
            <el-image :src="`${payload.productHomeImageUrl}`" class="img"></el-image>
          </div>
          <!-- 外部背景结束 -->
          <!-- 内部详情开始 -->
          <div class="inner">
            <!-- 左侧大小图开始 -->
            <div class="left" id="left" v-if="small">
              <div class="big">
                <el-image :src="`${payload.productHomeImageUrl}`" class="picture"></el-image>
              </div>
              <div class="small">
                <div v-for="(item, index) in small" :key="index" class="demo-image__preview">
                  <el-image
                    :src="small[index].imageUrl"
                    class="small_pic"
                    :preview-src-list="imageUrl"
                  ></el-image>
                </div>
              </div>
            </div>

            <div class="left" id="left" v-else>
              <div class="big" style="height:100%">
                <el-image :src="`${payload.productHomeImageUrl}`" class="picture"></el-image>
              </div>
            </div>

            <div class="right">
              <div>
                <div class="grid-content bg-purple1">{{ payload.productName }}</div>
                <div class="grid-content bg-purple3">{{ twoNum(skuPrice) }}</div>

                <el-divider></el-divider>
                <div class="grid-content bg-purple2">
                  <span>上架时间：</span>2021-07-12 12:00
                </div>

                <div class="grid-content bg-purple2">
                  <span>所属分类：</span>
                  <el-tag type="success" size="mini">{{ category }}</el-tag>&nbsp;
                </div>

                <div class="grid-content bg-purple2">
                  <span>商品状态：</span>售卖中
                </div>
                <div class="grid-content bg-purple2">
                  <span>商品库存：</span>
                  {{ OrderMsg.productSkuStock }}件
                </div>
                <div class="grid-content bg-purple2">
                  <span>商家描述：</span>
                  {{ payload.productDetail }}
                  <el-divider></el-divider>
                </div>

                <div class="grid-content bg-purple2">
                  <div class="property" v-if="reFresh">
                    <span>属性规格：</span>
                    <br />
                    <!--????????????????? -->
                    <sku-test
                      :productInfoPO="choice"
                      @listenToChildEvent="ReciptMsgFromChild"
                      @listenToSku="getSkuChoice"
                      ref="son"
                    />
                    <!--????????????????? -->
                  </div>
                </div>
                <div class="grid-content bg-purple2 count-out">
                  <span>购买数量：</span>
                  <div class="count">
                    <button class="NumButton" @click="minus" :disabled="n == 1">-</button>
                    <span>
                      <!-- {{n}} -->
                      <el-input v-model="n" maxlength="2" @blur="panduan()">{{ n }}</el-input>
                    </span>

                    <button @click="add" class="NumButton">+</button>
                  </div>
                  <!-- <el-input-number
                  size="mini"
                  controls-position="right"
                  v-model="num"
                  :min="1"
                  :max="10"
                  label="描述文字"
                  ></el-input-number>-->
                </div>
                <el-button class="pay" @click="pay()">立即购买</el-button>
              </div>
            </div>
            <!-- 确认订单开始 -->
            <div class="form" v-if="display">
              <div>
                <h3 style="text-align: center">请确认订单信息</h3>
                <el-divider></el-divider>
                <div>商品名：{{ payload.productName }}</div>
                <div v-if="reFresh">
                  <div v-for="(item, index) in standard" :key="index">{{ index }}:{{ item }}</div>
                  <!-- <div v-for="(item, index) in choice.list" :key="index">
                    <div v-for="(val, key) in item" :key="item[key]">
                      <div>{{ key }}:{{ item[key].productPropertyValue }}</div>
                    </div>
                  </div>-->
                  <!-- <div v-for="(value, key) in datas" :key="key">
                    <div>{{ key }}:{{ value }}</div>
                  </div>-->
                </div>
                <div>购买数量： {{ n }}</div>
                <div>价格： {{ twoNum(skuPrice) }}</div>
                <el-button @click="payment(payload.productName, skuPrice)">确认购买</el-button>
                <el-button @click="abandon()">放弃购买</el-button>
              </div>
            </div>
            <div class="black" v-if="display"></div>
            <!-- 确认订单结束 -->
          </div>

          <div class="icon">
            <div class="leftbox" @click="Left()">
              <el-image src="../assets/image/charity/left.png" class="left"></el-image>
            </div>
            <div class="rightbox" @click="Right()">
              <el-image src="../assets/image/charity/right.png" class="right"></el-image>
            </div>
          </div>
        </div>
      </swiper-slide>
      <swiper-slide>
        <div class="detai noSwipingClass scroll-wrap">
          <div class="background"></div>
          <div class="content">
            <div class="detailsText">
              <h1>商品详情</h1>
              <div>
                精选好物
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
              </div>
              <div>
                品质保障
                <p>
                  placeat? Aliquid ea illo minima nam sapiente optio, vitae quos
                  ab est minus sit vero repellat, nihil consequuntur blanditiis?
                </p>
              </div>
              <div>
                售后无忧
                <p>consectetur ipsum dolor sit amet consectetur adipisicing elit.</p>
              </div>
            </div>

            <div class="detailsPicture">
              <swiper
                :options="swiperOption"
                :auto-update="true"
                :auto-destroy="true"
                ref="mySwiper"
              >
                <swiper-slide
                  v-for="(item, index) in image"
                  :key="image[index].productDetailImageUrl"
                >
                  <el-image :src="`${image[index].productDetailImageUrl}`"></el-image>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>
              <!-- <swiper :options="swiperOption" ref="mySwiper">
                <swiper-slide v-for="(item, index) in img" :key="index">
                  <el-image :src="payload[index]"></el-image>
                </swiper-slide>
                <div class="swiper-pagination" slot="pagination"></div>
              </swiper>-->
            </div>
          </div>
        </div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import SkuTest from "views/charity/child/SkuTest";
// import(`views/charity/child/SkuTest/${skuResult}`);
import { dmoney } from "network/pay";
import $ from "jquery";
import {
  getProImage,
  getProductById,
  getDetailImage,
  getCategoryOne,
  getChoice,
  getSku,
  createOrder,
  changeOrderStatus,
  isPay,
  getMaxIdOfProduct
} from "network/charity.js";
export default {
  name: "Detail",

  data() {
    return {
      reFresh: false,
      MaxId: "",
      check: "",
      datas: "yy",
      skuchioce: "xx",
      sre: "",
      Statu: 0,
      // productInfo: {
      //   list: [
      //     {
      //       颜色: [
      //         {
      //           productPropertyValueId: 7,
      //           productPropertyNameId: 6,
      //           productPropertyValue: "黑色",
      //           productPropertyImage:
      //             "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/63b9f7fc4dab40ec8a5643318f6ca0c2.webp"
      //         },
      //         {
      //           productPropertyValueId: 8,
      //           productPropertyNameId: 6,
      //           productPropertyValue: "白色",
      //           productPropertyImage:
      //             "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/c8f5cc5fd8f946efbe5fedb649cf4c3f.webp"
      //         },
      //         {
      //           productPropertyValueId: 9,
      //           productPropertyNameId: 6,
      //           productPropertyValue: "玫瑰金",
      //           productPropertyImage:
      //             "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/9b5c6d61a08c4639b119be8ee8f331ae.webp"
      //         }
      //       ]
      //     },
      //     {
      //       容量: [
      //         {
      //           productPropertyValueId: 10,
      //           productPropertyNameId: 7,
      //           productPropertyValue: "6+128",
      //           productPropertyImage: null
      //         },
      //         {
      //           productPropertyValueId: 11,
      //           productPropertyNameId: 7,
      //           productPropertyValue: "8+128",
      //           productPropertyImage: null
      //         }
      //       ]
      //     },
      //     {
      //       保险服务: [
      //         {
      //           productPropertyValueId: 12,
      //           productPropertyNameId: 8,
      //           productPropertyValue: "半年保险",
      //           productPropertyImage: null
      //         },
      //         {
      //           productPropertyValueId: 13,
      //           productPropertyNameId: 8,
      //           productPropertyValue: "全年保险",
      //           productPropertyImage: null
      //         }
      //       ]
      //     }
      //   ],
      //   map: {
      //     "8:11": {
      //       productSkuId: 8,
      //       productId: 7,
      //       productSkuProperties: "8:11",
      //       productSkuDesc: "白色，8+128",
      //       productSkuPrice: 2999,
      //       productSkuStock: 100,
      //       version: 10,
      //       status: true
      //     },
      //     "9:10": {
      //       productSkuId: 9,
      //       productId: 7,
      //       productSkuProperties: "9:10",
      //       productSkuDesc: "玫瑰金, 6+128",
      //       productSkuPrice: 2999,
      //       productSkuStock: 50,
      //       version: 8,
      //       status: true
      //     },
      //     "7:10": {
      //       productSkuId: 5,
      //       productId: 7,
      //       productSkuProperties: "7:10",
      //       productSkuDesc: "黑色，6+128",
      //       productSkuPrice: 1999,
      //       productSkuStock: 200,
      //       version: 2,
      //       status: true
      //     },
      //     "8:10": {
      //       productSkuId: 7,
      //       productId: 7,
      //       productSkuProperties: "8:10",
      //       productSkuDesc: "白色，6+128",
      //       productSkuPrice: 1999,
      //       productSkuStock: 200,
      //       version: 0,
      //       status: true
      //     }
      //   }
      // },
      categoryId: "",
      orderId: "",
      payId: "",
      skuPrice: "",
      price: "",
      standard: {},
      OrderMsg: {
        productSkuId: 9,
        productId: 7,
        productSkuProperties: "9:10:12",
        productSkuDesc: "玫瑰金, 6+128，半年保险",
        productSkuPrice: 2999,
        productSkuStock: 50,
        version: 8,
        status: true
      },
      display: false,
      n: 1,
      imageUrl: [
        "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/676cd6450f5a44878d31e1725bb4a0d8.webp"
      ],
      choice: "",
      // choice: {
      //   choices: [
      //     {
      //       颜色: [
      //         {
      //           productPropertyValueId: 7,
      //           productPropertyNameId: 6,
      //           productPropertyValue: "黑色",
      //           productPropertyImage:
      //             "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/63b9f7fc4dab40ec8a5643318f6ca0c2.webp"
      //         },
      //         {
      //           productPropertyValueId: 9,
      //           productPropertyNameId: 6,
      //           productPropertyValue: "玫瑰金",
      //           productPropertyImage:
      //             "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/9b5c6d61a08c4639b119be8ee8f331ae.webp"
      //         }
      //       ]
      //     },
      //     {
      //       容量: [
      //         {
      //           productPropertyValueId: 10,
      //           productPropertyNameId: 7,
      //           productPropertyValue: "6+128",
      //           productPropertyImage: null
      //         },
      //         {
      //           productPropertyValueId: 11,
      //           productPropertyNameId: 7,
      //           productPropertyValue: "8+128",
      //           productPropertyImage: null
      //         }
      //       ]
      //     }
      //   ]
      // },
      category: "",
      // category: {
      //   categoryId: 7,
      //   categoryParentId: 0,
      //   categoryTitle: "农产品",
      //   createTime: null,
      //   status: true
      // },
      image: "",
      // image: [
      //   {
      //     productDetailImageId: 4,
      //     productId: 7,
      //     productDetailImageUrl:
      //       "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/676cd6450f5a44878d31e1725bb4a0d8.webp"
      //   }
      // ],
      small: "",
      // small: [
      //   {
      //     imageId: 5,
      //     productId: 7,
      //     imageUrl:
      //       "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/60dc227e092243e3b96f48247102f864.webp"
      //   },
      //   {
      //     imageId: 6,
      //     productId: 7,
      //     imageUrl:
      //       "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.webp/20210713/3c54f8313d4b4c97bb3e48a9f63f39f7.webp"
      //   },
      //   {
      //     imageId: 7,
      //     productId: 7,
      //     imageUrl:
      //       "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.jpg/20210715/bd5e0c99c1454dd8b46e0044dab177f7.jpg"
      //   }
      // ],
      radio0: "0",
      radio1: "1",
      radio2: "2",
      num: 1,
      i: 0,
      payload: "",
      // payload: {
      //   productId: 7,
      //   productName: "小米手机",
      //   productPrice: 1999,
      //   productCategory: 9,
      //   productDetail: "为发烧而生",
      //   productHomeImageUrl:
      //     "http://wanderingdream.oss-cn-chengdu.aliyuncs.com/.jpg/20210713/30e53b00047f432f85a43b08ac8f6a69.jpg",
      //   createTime: null,
      //   status: true
      // },
      swiperOption: {
        direction: "vertical",
        slidesPerView: 1,
        spaceBetween: 30,
        mousewheel: true,
        autoHeight: true,
        noSwipingClass: "scroll-wrap",
        height: window.innerHeight,
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      },
      imageUrl: [
        "https://img2.baidu.com/it/u=1495761429,1840845830&fm=26&fmt=auto&gp=0.jpg",
        "https://img0.baidu.com/it/u=2018997609,2139078477&fm=26&fmt=auto&gp=0.jpg",
        "https://img0.baidu.com/it/u=3990899755,3858794979&fm=26&fmt=auto&gp=0.jpg"
        // "https://img0.baidu.com/it/u=2478037837,2947420248&fm=26&fmt=auto&gp=0.jpg",
        // "https://img1.baidu.com/it/u=769494851,2608252820&fm=26&fmt=auto&gp=0.jpg",
        // "https://img2.baidu.com/it/u=2734570246,3987787106&fm=26&fmt=auto&gp=0.jpg",
        // "https://img0.baidu.com/it/u=1908282863,2394193316&fm=26&fmt=auto&gp=0.jpg"
      ]
    };
  },
  components: {
    SkuTest
  },
  methods: {
    //获取分类
    getCategoryOne() {
      getCategoryOne(this.categoryId)
        .then(result => {
          this.category = result.payload.categoryTitle;
        })
        .catch(error => {});
    },

    twoNum(data) {
      return "￥" + data.toFixed(2);
    },
    ReciptMsgFromChild(data) {
      this.datas = data[1];
      this.standard = data[2];
      this.getDetails(data[0]);
      this.n = 1;
    },
    getSkuChoice(data) {
      this.skuchioce = data;
      console.log(data);
    },
    // pinjie(){
    //   let pinjie='';
    //   pinjie+='`$this.sonItem.productPropertyValueId`'

    // },
    panduan() {
      if (this.n <= 0) {
        this.n = 1;
      }
    },
    payment(productName, price) {
      this.createOrder(productName, price);
      this.display = false;
      //根据状态码判断是否下单成功
      // if (this.Statu == 201)
      /* const _this=this; */
      //弹出提示信息
      this.$message({
        showClose: true,
        message: "下单成功，请在15分钟内完成支付",
        type: "success",
        duration: 0
      });
    },
    createOrder(productName, price) {
      createOrder({
        number: this.n,
        productSku: this.OrderMsg,
        username: localStorage.getItem("username")
      })
        .then(result => {
          console.log(result);
          this.orderId = result.payload;
          this.payPage(productName, price);
        })
        .catch(error => {
          this.$message({
            showClose: true,
            message: "创建订单失败！",
            type: "fail",
            duration: 0
          });
        });
    },
    payPage(productName, price) {
      let productId = this.$route.query.id;
      let formData = new FormData();
      // 支付订单编号
      this.payId = Math.ceil(Math.random() * 1000000);
      formData.append("recipientId", productId);
      formData.append("donationMoney", price);
      dmoney(formData).then(res => {
        // window.open();
        // console.log(res);
        // alert(1);
      });
      $.ajax({
        url: "api/sys/api/pay", //请求路径
        data: {
          amount: price,
          id: this.payId,
          info: productName
        },
        async: true,
        type: "POST", //GET
        //dataType: "JSON",//需要返回JSON对象(如果Ajax返回的是手动拼接的JSON字符串,需要Key,Value都有引号)
        success: function(data) {
          //处理 resp.responseText;
          let dwSafari;
          dwSafari = window.open();
          // dwSafari.document.open();
          let dataObj = data;

          dwSafari.document.write(
            "<html><head></head><title></title><meta charset='utf-8'><body>" +
              dataObj +
              "</body></html>"
          );
          dwSafari.document.forms[0].submit();

          dwSafari.document.close();
        },
        error: function(a, b, c) {}
      });
    },
    // 查询支付状态，修改订单支付状态
    changeOrderStatus() {
      if (this.orderId) {
        isPay(this.payId).then(res => {
          console.log("状态" + res.message);
          if (res.message == "成功") {
            changeOrderStatus(this.orderId).then(res => {});
          }
        });
      }
      // alert("即将返回商城首页!")
    },
    add() {
      this.n++;
      this.skuPrice = this.n * this.price;
    },
    minus() {
      if (this.n > 1) {
        this.n--;
      }
      this.skuPrice = this.n * this.price;
    },
    pay() {
      let str = "";
      let obj = this.$refs.son.skuResult;
      console.log(obj);
      for (let item in obj) {
        str = str + ":" + obj[item];
      }
      this.sre = str.substring(1, str.length);
      this.display = true;
    },
    confirm() {
      this.createOrder();
      this.display = false;
    },
    abandon() {
      this.display = false;
    },
    Left() {
      this.check = 0;
      if (this.$route.query.id > 7) {
        this.$router.push({
          path: "/detail",
          query: {
            type: "category",
            id: this.$route.query.id - 1
          }
        });
        this.getProductById(this.$route.query.id);
      }
    },
    Right() {
      this.check = 1;
      if (this.$route.query.id < this.MaxId) {
        this.$router.push({
          path: "/detail",
          query: {
            type: "category",
            id: Number(this.$route.query.id) + 1
          }
        });
        this.getProductById(this.$route.query.id);
      } else {
        this.$message({
          showClose: true,
          message: "亲！这已经是最后一个商品了！",
          type: "success",
          duration: 0
        });
      }
    },
    // 获取商品最大ID
    getMaxIdOfProduct() {
      getMaxIdOfProduct().then(res => {
        this.MaxId = res.payload;
      });
    },

    toRouter(path) {
      this.$router.push(path);
      // window.location.reload();
    },
    //实时更新商品信息
    getDetails(ins) {
      getSku({
        productId: this.$route.query.id,
        property: ins
      })
        .then(result => {
          console.log("结果" + result);
          this.skuPrice = this.price = result.payload.productSkuPrice;
          this.OrderMsg = result.payload;
          console.log("OrderMsg:" + this.OrderMsg);
        })
        .catch(error => {
          console.log(error);
        });
    },
    getProductById() {
      getProductById(this.$route.query.id)
        .then(result => {
          this.payload = result.payload;
          if (!result.payload && this.check) {
            this.Right();
          }
          if (!result.payload && !this.check) {
            this.Left();
          } else {
          }
          this.categoryId = result.payload.productCategory;
          this.price = this.skuPrice = this.payload.productPrice;
          this.getCategoryOne();
          this.getChoice();
          this.getDetailImage();
          this.getProImage();
        })
        .catch(error => {});
    },
    getChoice() {
      //获取商品choice
      getChoice(this.$route.query.id)
        .then(result => {
          if (result.payload) {
            this.choice = result.payload;
          } else {
            this.choice = "";
          }
        })
        .catch(error => {});
      //获取商品最大ID
      this.getMaxIdOfProduct();
    },
    getProImage() {
      // 加载小图
      getProImage(this.$route.query.id)
        .then(result => {
          this.small = result.payload;
          for (var i in this.small) {
            this.imageUrl[i] = this.small[i].imageUrl;
          }
        })
        .catch(error => {});
    },
    getDetailImage() {
      //详情图
      getDetailImage(this.$route.query.id)
        .then(result => {
          this.image = result.payload;
        })
        .catch(error => {});
    }
  },
  watch: {
    choice() {
      this.reFresh = false;
      this.$nextTick(() => {
        this.reFresh = true;
      });
    }
  },
  computed: {},

  created() {
    //加载大图
    this.getProductById();
    // this.getChoice();
  },

  mounted() {},
  beforeDestroy() {
    this.changeOrderStatus();
  }
};
</script>

<style scoped>
.zong {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
}
.outer {
  height: 100vh;
  text-align: center;
  line-height: 100vh;
  float: left;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  filter: blur(3px);
  position: absolute;
  top: 0;
  animation: pulse 7s infinite;
}
.img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.inner {
  width: 70%;
  height: 70%;
  margin: 15vh auto;
  text-align: center;
  overflow: hidden;
  display: flex;
  z-index: 3;
  background-color: aliceblue;
  border-radius: 10px;
  box-shadow: 3px 3px 20px 3px rgb(126, 125, 125),
    -3px -3px 20px 1px rgb(245, 244, 244);
  position: relative;
}
.inner > .left {
  width: 65%;
  height: 100%;
  float: left;
  overflow: hidden;
}
.inner > .left > .big {
  height: 80%;
}
.inner > .left > .small {
  height: 20%;
  width: 100%;
  background-color: #dde6e0;
  /* overflow: auto; */
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.inner > .left > .small > div {
  /* float: left; */
  display: inline-block;
  border: 2px solid rgb(195, 192, 192);
  box-sizing: border-box;
  height: 100%;
  width: 20%;
}
.small_pic {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.picture {
  height: 100%;
  width: 100%;
}
.inner > .right {
  /* height: 100%; */
  width: 45%;
  /* background-color: rgb(165, 185, 165); */
  background-color: rgba(171, 189, 171, 0.81);
  float: right;
  padding: 20px 30px;
  text-align: left;
  display: flex;
  align-items: center;
  text-align: justify;
}

.pay {
  margin: 10px auto;
  width: 80%;
  background-color: #e9dfbb;
}
.icon {
  position: relative;
  width: 78%;
  z-index: 10;
  margin: -50vh auto;
  box-sizing: border-box;
}
.icon .right {
  float: right;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 50px;
  animation: fadeOutRight 5s infinite;
  cursor: pointer;
}
.icon .left {
  float: left;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 50px;
  animation: fadeOutLeft 5s infinite;
  cursor: pointer;
}
.icon .left:hover {
  box-shadow: 0 0 30px 5px white;
  background-color: rgba(0, 0, 0, 0.5);
  animation: none;
}

.icon .right:hover {
  box-shadow: 0 0 30px 5px white;
  background-color: rgba(0, 0, 0, 0.5);
  animation: none;
}

.el-col {
  border-radius: 4px;
}
.bg-purple1 {
  color: rgb(248, 244, 237);
  font-size: 25px;
  /* text-align: center; */
  animation: moves 1s;
  font-weight: bold;
}
.bg-purple3 {
  color: #306242;
  font-size: 24px;
  /* text-align: center; */
  animation: moves 2s;
  font-weight: bold;
}
@keyframes moves {
  0% {
    opacity: 0;
    margin-top: 40px;
  }
  10% {
    opacity: 0;
    margin-top: 40px;
  }
  80% {
    margin-top: -3px;
  }
  100% {
    opacity: 1;
    margin-top: 0;
  }
}
.bg-purple3 span {
  color: #306242;
  font-size: 18px;
  animation: moves 2s;
}
.bg-purple2 {
  color: #6d6a6a;
  font-size: 17px;
  animation: moves 3s;
  font-weight: bold;
}
.bg-purple2 span {
  color: #306242;
  font-size: 18px;
  /* animation: moves 3s; */
  font-weight: 800;
}
.grid-content {
  border-radius: 4px;
  margin: 3px 0px;
  min-height: 1px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.back {
  width: 75px;
  height: 45px;
  font-size: 20px;
  position: absolute;
  color: white;
  background-color: rgba(0, 0, 0, 0.1);
  z-index: 11;
  margin: 20px;
  /* top: -300px;
  left: -180px; */
  border-radius: 6px;
  padding: 10px;
  cursor: pointer;
  overflow: hidden;
}
.back:hover {
  background-color: rgba(0, 0, 0, 0.2);
}
.el-divider--horizontal {
  margin: 15px 0px;
}

/* .el-input-number--mini {
  width: 85px;
}
.el-radio-button__inner {
  padding: 0;
  display: flex;
  border: none;
}
.el-radio-group {
  margin: 3px;
}
.el-radio-group .sku {
  display: inline-block;
  font-size: 18px;
  color: #798b7f;
  width: 80px;
}
.el-radio-button {
  background-color: #fff;
  display: inline-flex;
  margin-right: 10px;
  cursor: pointer;
  color: #306242;
  border-radius: 3px;
  overflow: hidden;
 
}
.el-radio-button .el-image {
  overflow: initial;
}
.el-radio-button p {
  line-height: 35px;
  font-size: 12px;
}
.el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #e4e1d6;
  border: 2px solid rgb(180, 165, 77);
  box-sizing: border-box;
  color: rgb(78, 53, 6);
  animation: none;
} */

.inner ::-webkit-scrollbar {
  width: 6px; /*设置滚动条宽度为6px*/
  height: 13px;
  display: flex;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
  /* border-radius: 12px; */
  background-color: #9eafa8;
}
/*定义滚动滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
  border-radius: 12px;
  box-shadow: inset 0 0 6px rgba(154, 186, 204, 0.7);
  background-color: #d0ddd3; /*修改滑块颜色*/
}

::-webkit-scrollbar-thumb:hover {
  background: rgb(232, 235, 234);
}
.background {
  width: 100vw;
  height: 100vh;
  background-color: rgb(219, 237, 243);
  animation: add 25s linear infinite;
  z-index: 1;
}
@keyframes add {
  0% {
    width: 0px;
  }
  28% {
    width: 100%;
    margin-left: 0;
  }
  33% {
    margin-left: 100vw;
    background-color: rgb(219, 237, 243);
  }

  34% {
    width: 0px;
    margin-left: 100vw;
    background-color: rgba(243, 227, 231, 0.774);
  }
  62% {
    width: 100%;
    margin-left: 0;
    background-color: rgba(243, 227, 231, 0.774);
  }
  67% {
    margin-right: 100vw;
    background-color: rgba(243, 227, 231, 0.774);
  }

  68% {
    width: 0px;
    margin-right: 100vw;
    background-color: rgba(243, 227, 231, 0.774);
  }
  68.01% {
    background-color: #e2ebd3;
  }
  95% {
    width: 100%;
    margin-left: 0;
    background-color: #e2ebd3;
  }
  100% {
    margin-left: 100vw;
    background-color: #e2ebd3;
  }
}
:root {
  --color-background: #fff;
}
.detailsText {
  position: absolute;
  width: 20vw;
  height: 90vh;
  z-index: 2;
  display: inline-block;
  top: 18vh;
  left: 8vw;
}
.detailsText h1 {
  margin: 0 0 10px 0;
  color: rgb(110, 110, 110);
}
.detailsText div {
  border: 2px solid #fff;
  font-size: 30px;
  color: rgb(228, 179, 139);
  margin-bottom: 20px;
  background-color: rgba(255, 251, 251, 0.376);
  border-radius: 7px;
  padding: 10px;
}
.detailsText div p {
  color: rgb(104, 103, 103);
  font-size: 18px;
}
.detailsPicture {
  position: absolute;
  width: 60vw;
  height: 70vh;
  border: 2px solid #fff;
  font-size: 25px;
  z-index: 2;
  display: inline-block;
  top: 15vh;
  right: 8vw;
  overflow-x: hidden;
  overflow-y: scroll;
  padding: 10px;
}
.detai {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* margin-top: 100vh; */
  overflow: auto;
}
.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
}
.swiper-slide {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.count-out {
  display: flex;
}
.count {
  display: flex;
  margin-top: -5px;
  /* width: 60px; */
}
.count span {
  display: inline-block;
  background-color: #fff;
  border-radius: 3px;
  /* width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center; */
}
.count /deep/ .el-input__inner {
  width: 30px;
  height: 30px;
  display: inline-block;
  padding: 0px;
  line-height: 30px;
  text-align: center;
}
.count button {
  height: 30px;
  width: 20px;
  display: inline-block;
}
/* .pro-category {
  height: 25px;
  line-height: 25px;
}
.pro-category span {
  display: inline-block;
  line-height: 25px;
  font-size: 14px;
  padding: 1px;
  box-sizing: border-box;
} */
.el-divider--horizontal {
  margin: 10px 0;
}
.form {
  padding: 20px;
  width: 400px;
  height: 400px;
  position: absolute;
  margin: 50px auto;
  /* line-height: 100%; */
  z-index: 13;
  background-color: #c4d3cef1;
  text-align: left;
  border-radius: 5px;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
  display: flex;
  align-items: center;
  text-align: justify;
  border-radius: 5px;
}

.form > div {
  margin: 0 auto;
  width: 250px;
  border-radius: 5px;
  padding: 15px;
  border: 2px solid rgba(255, 255, 255, 0.726);
  box-sizing: border-box;
}
.form > div > div {
  margin: 10px;
}
.black {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0, 0, 0, 0.6);
  z-index: 5;
}
.NumButton {
  border-color: #3062421e;
  background-color: #30624272;
  border-radius: 3px;
  color: white;
}
</style>
